<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="box" id="boxId" key="1">
        我是一个div盒子
    </div>
    <div id="root">
        <!-- 把创建的虚拟dom添加到#root  -->
    </div>
</body>
<script>
    let arr = ["哈哈", "嘿嘿", "啦啦"];
    // 以前：如果是通过数据渲染页面，只能渲染固定标签，而且标签上不能随便定义class或者id等其他属性

    let obj = {
        name: "div", //指定渲染的标签
        props: { //属性对象
            class: "box", //类名
            id: "boxId", //id
            key: "1",
            children: ["春天", "夏天", "秋天", "冬天"],
        }
    }

    // ❤ 封装一个用来创建虚拟标签的函数 
    // 有2个参数：1）要创建的标签 2）要渲染的位置 
    function renderDom(obj, root) {
        // 1. ❤ 首先，创建一个标签
        let dom = document.createElement(obj.name);
        // 2. ❤ 其次，给标签添加props里面的属性 
        // 1）先判断里面是否有内容【通过Object.keys获取对象的所有属性，获取到的结果是一个数组，通过长度判断即可】
        if (Object.keys(obj.props)) {
            // 2）遍历props里面的内容 【因为是对象，所以用for in】
            for (let key in obj.props) {
                console.log("key",key,obj.props[key]);
                // children是特殊属性，不在标签上，是标签的内容，所以单独判断
                if (key === "children") {
                    obj.props[key].forEach(item => { //遍历children里面的内容
                        dom.innerHTML += item;
                    })
                } else { //setAttribute【给标签添加属性】
                    dom.setAttribute(key, obj.props[key]);
                }
            }
        }
        // 3.添加到指定标签里 
        root.appendChild(dom)
    }
    // 调用 
    renderDom(obj, root)
</script>

</html>